<template>
  <div>
    <!-- <div class="bg_grey_all"></div> -->
    <van-row gutter="20" class="title_left">
      <van-col span="8" style="padding-top: 45px">
        <a @click="back" class="back_a" style="color: white; margin-left: 10px">
          返回
        </a>
      </van-col>
      <van-col
        span="8"
        style="text-align: center; color: white; padding-top: 45px"
        >{{ title }}</van-col
      >
      <van-col span="8"></van-col>
    </van-row>
    <van-row class="topMargin">
      <van-col span="24">
        <van-cell :title="subTitle" class="bg_grey" />
        <van-form>

          <van-field
            v-if="record_flow === 1"
            v-model="workFlow.beginMemo"
            autosize
            label="备注"
            type="textarea"
            maxlength="200"
            placeholder="请输入开始用车备注"
            show-word-limit
          />

          <van-field
            v-if="record_flow === 2"
            v-model="workFlow.completeMemo"
            autosize
            label="备注"
            type="textarea"
            maxlength="200"
            placeholder="请输入取消申用备注"
            show-word-limit
          />

          <van-field
            v-if="record_flow === 3"
            v-model="workFlow.backUserMemo"
            autosize
            label="备注"
            type="textarea"
            maxlength="200"
            placeholder="请输入归还车辆备注"
            show-word-limit
          />

          <van-field
            v-if="record_flow === 3"
            readonly
            clickable
            name="picker"
            :value="costOrigin"
            label="费用由来"
            placeholder="请选择费用由来"
            @click="show_costOrigin_list = true"
          />
          <van-popup v-model="show_costOrigin_list" position="bottom">
            <van-picker
              show-toolbar
              :columns="costOrigin_list"
              @confirm="onCostOriginSelected"
              @cancel="show_costOrigin_list = false"
            />
          </van-popup>

          <van-field v-if="record_flow === 3" v-model="workFlow.backCost" type="digit" label="费用" :disabled="isCostDisabled">
            <template #right-icon>
              元
            </template>
          </van-field>

          <van-field v-if="record_flow === 3" name="uploader" label="上传文件">
            <template #input>
              <van-uploader max-count=3 :after-read="onRead" v-model="uploader" />
            </template>
          </van-field>

          <div style="margin: 16px">
            <van-button block type="primary" @click="commit">提交</van-button>
          </div>
        </van-form>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Api } from "../../../api/api_config";
import { Toast } from 'vant'
import WorkFlow from '../../../model/workFlow'

export default {
  data() {
    return {
      title: "",
      subTitle: "",
      useRecord: {},
      record_flow: 0,
      currentUser: {},
      message: "",
      workFlow: {},
      url: "",
      method: "",
      costOrigin: "",
      costOrigin_list: [],
      show_costOrigin_list: false,
      uploader: [],
      isCostDisabled: false
    };
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    initData() {
      this.$store.state.tab_show = false
      this.record_flow = this.$store.state.record_flow
      this.useRecord = this.$store.state.useRecord
      this.currentUser = this.$store.state.configuration.currentUser
      this.workFlow = new WorkFlow()
      // 提交的流程类型 1：开始用车 2：取消申用 3：归还车辆
      switch (this.record_flow) {
        case 1:
          this.title = '开始用车'
          this.subTitle = '请填写开始用车信息'
          this.method = Api.useRecord.begin.method
          this.url = Api.useRecord.begin.url + '/' + this.useRecord.id + "/begin"
          break;
        case 2:
          this.title = '取消申用'
          this.subTitle = '请填写取消申用信息'
          this.method = Api.useRecord.cancel.method
          this.url = Api.useRecord.cancel.url + '/' + this.useRecord.id + "/cancel"
          break;
        case 3:
          this.title = '归还车辆'
          this.subTitle = '请填写归还车辆信息'
          this.method = Api.useRecord.end.method
          this.url = Api.useRecord.end.url + '/' + this.useRecord.id + "/end"
          this.costOrigin_list.push({
            text: "加油", id: 1,
          })
          this.costOrigin_list.push({
            text: "维修", id: 2,
          })
          this.costOrigin_list.push({
            text: "保养", id: 3,
          })
          this.costOrigin_list.push({
            text: "无", id: 4,
          })
          break;
        default:
          break;
      }
    },
    back() {
      this.$router.push("/carUsage");
    },
    onCostOriginSelected(value) {
      this.costOrigin = value.text
      this.workFlow.backCostOrigin = value.text
      if (this.workFlow.backCostOrigin === "无") {
        this.workFlow.backCost = 0
        this.isCostDisabled = true
      } else {
        this.isCostDisabled = false
      }
      this.show_costOrigin_list = false
    },
    onRead(_file) {
      let file = _file.file;
      this.formData = new FormData();
      this.formData.append("files", file);
      let that = this;
      Toast.loading({
        message: "上传中...",
        forbidClick: true,
      });
      this.$axios({
            method: Api.file.upload.method,
            url: Api.file.upload.url,
            data: this.formData
          })
        .then(function (response) {
          response.data.forEach(element => {
            that.workFlow.filelist.push({
              id: element.id,
              type: 3
            });
          });
          Toast.clear()
        })
        .catch(function (error) {
          console.log(error)
          Toast.clear()
        });
    },
    commit() {
      let that = this;
      this.$axios({
        method: this.method,
        url: this.url,
        data: this.workFlow
      })
        .then(function () {
          Toast.success("提交成功")
          that.$router.push('/carUsage')
        })
        .catch(function (e) {
          console.log(e);
        });
    }
  },
};
</script>

<style scoped>
</style>
